<template>
	<view class="mvh100 mvh100 bgf">
		<view class="content">
			<view class="">
				<view class="flex_x">
					<view class="name c3 fw500 fs32">联系人</view>
					<view class="ml24 flex1">
						<u--input placeholder="姓名" border="none" v-model="from.contact"></u--input>
					</view>
				</view>
				<view class="line mtb24"></view>
			</view>
			<view class="">
				<view class="flex_x">
					<view class="name c3 fw500 fs32">手机号</view>
					<view class="ml24 flex1">
						<u--input placeholder="收货人手机号" border="none" v-model="from.telephone"></u--input>
					</view>
				</view>
				<view class="line mtb24"></view>
			</view>

			<view class="">
				<view class="flex_x">
					<view class="name c3 fw500 fs32">所在地区</view>
					<view class="ml24 flex1" @click="showCity=true">
						<u--input placeholder="请选择省/市/区" border="none" v-model="citys" suffixIcon="arrow-right"
							suffixIconStyle="color: #909090" disabled disabledColor='#fff'></u--input>
					</view>
				</view>
				<view class="line mtb24"></view>
			</view>

			<view class="">
				<view class="flex_x">
					<view class="name c3 fw500 fs32">详细地址</view>
					<view class="ml24 flex1">
						<u--input placeholder="填写街道详细地址" border="none" v-model="from.address"></u--input>
					</view>
				</view>
				<view class="line mtb24"></view>
			</view>

			<view class="mt10">
				<view class="flex_btw">
					<view class="c3 fw500 fs32">设置默认地址</view>
					<view class=" ">
						<u-switch v-model="from.is_default" size="20" activeColor="#2A71C0" :activeValue='1'
							:inactiveValue='0'></u-switch>
					</view>
				</view>
			</view>
		</view>

		<view class="btn flex_y w100">
			<view class="btna flex_c cf fw500 fs26" @click="submit">提交</view>
		</view>

		<!-- 弹窗 -->
		<view class="">
			<!-- 地址选择 -->
			<view class="">
				<region @chechCity="chechCity" :show.sync="showCity" confirmColor='#2A71C0'>
				</region>
			</view>
		</view>
	</view>
</template>

<script>
	import region from '@/components/city/region.vue';
	export default {
		components: {
			region
		},
		data() {
			return {
				from: {
					contact: '', //姓名
					telephone: '', //电话
					province: '', //省
					city: '', //市
					district: '', //区
					address: '', //详细地址
					is_default: 0, //是否默认
				},
				citys: '', //省市区
				showCity: false, //选择地址弹窗
				flag: 1, //2->编辑地址
			}
		},
		onLoad(options) {
			console.log(options);
			if (options.title) {
				uni.setNavigationBarTitle({ //修改导航栏文字
					title: options.title
				})
			}
			if (options.flag) {
				this.flag = options.flag
				let address = uni.getStorageSync('address')
				// 拷贝部分对象属性给另一个对象
				Object.keys(this.from).forEach(key => {
					this.from[key] = address[key] || this.from[key]
				});
				this.from.id = address.id
				this.citys = this.from.province + this.from.city + this.from.district
			}
		},
		onShow() {

		},
		methods: {
			chechCity(e) { //选择地址
				console.log(e);
				this.from.province = e.citya[0]
				 this.from.city = e.citya[1]
				  this.from.district= e.citya[2]

				this.citys = e.city
			},
			submit() { //提交
				if (!this.from.contact) {
					uni.$u.toast('请输入姓名')
				} else if (!this.from.telephone) {
					uni.$u.toast('请输入手机号')
				} else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.from.telephone)) {
					uni.$u.toast('请输入正确的手机号')
				} else if (!this.from.province && !this.from.city && !this.from.district) {
					uni.$u.toast('请选择省市区')
				} else if (!this.from.address) {
					uni.$u.toast('请输入详细地址')
				} else {
					uni.$u.debounce(this.addAddress, 500) //防抖
				}
			},
			addAddress() { //添加地址
				this.$api.addAddress(this.from).then(res => {
					if (res.code == 1) {
						this.$toast.toast(res.msg, () => {
							console.log(888);
							uni.navigateBack()
						})
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40upx 32upx;

		.name {
			width: 130upx;
		}

		.line {
			height: 1upx;
			background-color: #d8d8d8;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(40upx + env(safe-area-inset-bottom));

		.btna {
			width: 687upx;
			height: 80upx;
			background: #2A71C0;
			border-radius: 40upx;
		}
	}
</style>
